<template>
    <view class="content">
        <view v-if="false" class="write-back"></view>
        <gw-search-input @clickHandle="clickHandle" :disabled="true"/>
        <view class="home-swiper common-interval">
            <swiper class="swiper" :circular="true" :indicator-dots="indicatorDots" :autoplay="autoplay" indicator-color="#fff" indicator-active-color="#6C98FC"
                    :interval="interval" :duration="duration">
                <swiper-item v-for="(item, index) in banners" :key="index">
                    <image :src="item.bannerHead"/>
                </swiper-item>
            </swiper>
        </view>
        <book-classify/>
        <book-recommend/>
        <book-list :cardList="cardList" ref="bookList"/>
        <gwUserLogin ref="userLogin" :modalType="modalType"></gwUserLogin>

    </view>
</template>

<script>
    import BookList from './bookList'
    import bookRecommend from './bookRecommend'
    import bookClassify from './book-classify'
    import gwSearchInput from '../components/gw-search-input'
    import service from "@/service";
    import {mapGetters} from 'vuex';

    export default {
        name: 'Index',
        components: {
            BookList, bookRecommend, bookClassify, gwSearchInput
        },
        computed: {
            ...mapGetters(['shoppingNum', 'hidePart'])
        },
        data() {
            return {
                title: 'Hello',
                background: ['color1', 'color2', 'color3'],
                indicatorDots: true,
                banners: [],
                autoplay: true,
                interval: 4000,
                duration: 500,
                cardList: [],
                modalType: 'login'
            }
        },
        onLoad() {
            this.getBanners();
        },
        onShow(){
            if(this.shoppingNum){
                uni.setTabBarBadge({
                    index: 2,
                    text: `${this.shoppingNum}`
                });
            } else {
                uni.removeTabBarBadge({
                    index: 2
                })
            }
            this.$refs.bookList && this.$refs.bookList.getHomeConf();
        },
        mounted(){
            uni.$on('loginHandle', (val)=>{
                this.modalType = val;
                this.$refs.userLogin.showModal = true;
            })
        },
        methods: {
            getBanners () {
                uni.showLoading({
                    title: '',
                });
                service.homeService.getBanner({
                    data: {},
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            this.banners = res.result || []
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            });
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    },
                    complete: () => {
                    },
                });
            },
            changeRecommond() {
            },
            clickHandle() {
                uni.navigateTo({
                    url: './search/index?type=books'
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        height: auto;
        .home-swiper{
            margin-bottom: 40rpx;
            margin-top: 110rpx;
            height: 370rpx;
            .swiper{
                height: 100%;
                image{
                    width: 100%;
                    border-radius:20rpx;
                }
            }
        }
        .bottom-change{
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: chocolate;
            font-size: 14px;
        }
    }
    .write-back{
        position: fixed;
        left: 0;
        right:0;
        top: 0;
        bottom: 0;
        background: #ffffff;
        z-index: 100;
    }
</style>
